<template>
    <div class="person">
        <h2 ref="title">年龄：{{ person.age }}</h2>//!!!
        <button @click="showLog">测试</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {reactive,watch,ref} from 'vue'
    //data
    let person = reactive({
        name:"zhang-san",
        age:18,
        car:{
            c1:'奔驰',
            c2:'宝马'
        }
    })
    let title = ref()//!!!
    //function
    function showLog(){//!!!
        console.log(title.value)
    }
    //watch

</script>

<!-- //scoped：局部样式，确保.person只对对应文件生效 -->
<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>